<script setup lang="ts">
const CHUNK_SIZE = 1024 * 1024
// 文件切片
function createChunks(file: File) {
  let cur = 0
  const chunks = []

  while (cur < file.size) {
    const chunk = file.slice(cur, cur + CHUNK_SIZE)
    chunks.push(chunk)
    cur += CHUNK_SIZE
  }

  return chunks
}

async function handleFileChange(e: Event) {
  const target = e.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    const chunks = createChunks(target.files[0])

    // eslint-disable-next-line no-console
    console.log(chunks)
    const myWorker = new Worker('./myWork.js')
    myWorker.postMessage(chunks)

    myWorker.onmessage = (e) => {
      console.log(e.data)
    }
  }
}

function handleTextChange(e: Event) {
  const target = e.target as HTMLInputElement
  console.log(target.value)
}
</script>

<template>
  <!--
    web worker 是一个独立的线程，不会影响主线程的性能
    常见应用：大量计算、大量数据处理、耗时计算
  -->
  <div class="-page">
    <input type="file" @change="handleFileChange">

    <input type="text" @change="handleTextChange">
  </div>
</template>

<style lang="scss" scoped></style>
